<template>
  <div class="register">
    <el-row type="flex" justify="center">
      <table>
        <thead>
          <tr>
            <th align="center" colspan="4">注册</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>账号:</td>
            <td colspan="3">
              <el-input
                v-model="form.accunt"
                placeholder="账号"
                type="text"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td>密码:</td>
            <td colspan="3">
              <el-input
                v-model="form.pwd"
                placeholder="密码"
                type="password"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td>验证码:</td>
            <td colspan="2">
              <el-input
                v-model="form.captch"
                placeholder="请输入验证码"
                type="text"
              ></el-input>
            </td>
            <td>
              <Captcha :size="4" :height="32" :width="150"></Captcha>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td></td>
            <td colspan="">
              <el-button type="primary" @click="register"> 注册</el-button>
            </td>
            <td></td>
            <td colspan="">
              <el-button type="primary" @click="goLogin"> 去登录</el-button>
            </td>
          </tr>
        </tfoot>
      </table>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import Captcha from "./captcha.vue";
import { ref, Ref, reactive } from "vue";
const form = reactive({
  accunt: "",
  pwd: "",
  captch: "",
});
const register = () => {
  console.log("form=", form);
};

const emit = defineEmits(["register"]);
const goLogin = () => {
  emit("register");
};
</script>
<script lang="ts">
export default {
  name: "Register",
};
</script>

<style lang="less" scoped>
.register {
  padding: 20px;
  table {
    width: 600px;
  }
}
td {
  padding: 3px;
}
th {
  font-weight: 500;
  font-size: 24px;
  text-align: center;
}
</style>
